<template>
	<uni-popup ref="spuPopup" background-color="#fff" @change="popupChange">
		<view class="popup_content">
			<view class="box">
				<view class="close" @click="popupClose">
					<image class="image" mode="aspectFill" src="/static/home/close_border.png"></image>
				</view>
				<view class="popTop">
					<text class="text">{{productInfo.name}}</text>
				</view>
				<view class="spuList">
					<view class="title">
						<text>规格</text>
					</view>
					<view class="content">
						<view v-for="spuItem in spuList" :key="`spu_${spuItem.name}`"
							:class="`spuItem ${spuSel.name===spuItem.name?'activeItem':''}`" @click="spuChange(spuItem)">
							<text>{{spuItem.name}}</text>
							<text>|</text>
							<text>￥{{formatPrice(spuItem.price_sale)}}</text>
						</view>
					</view>
				</view>
				<view class="spuNumView">
					<view class="title">
						<text>数量</text>
					</view>
					<view class="spuNum">
						<uni-icons type="minus-filled" size="44rpx" @click="proNumMinus()"></uni-icons>
						<text>{{proNum}}</text>
						<uni-icons type="plus-filled" size="44rpx" @click="proNumPlus()"></uni-icons>
					</view>
				</view>

				<view class="btns" v-if="type==='add'">
					<button size="default" type="default" class="btnDefault btnGray" hover-class="btnHover" @click="toCart">
						加入购物车
					</button>
					<button size="default" type="default" class="btnDefault" hover-class="btnHover" @click="toBooking">
						立即购买
					</button>
				</view>
				<view class="btns" v-if="type==='edit'">
					<button size="default" type="default" class="btnDefault btnGray" hover-class="btnHover" @click="cartUpdate">
						仅保存
					</button>
					<button size="default" type="default" class="btnDefault" hover-class="btnHover" @click="cartBooking">
						去结算
					</button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import mixins from '@/common/mixins.js';
	export default {
		props: {},
		mixins: [mixins],
		data() {
			return {
				type: "add", // add 添加和购买； edit 更改和删除
				productInfo: {},
				spuList: [],
				spuSel: {},
				proNum: 1,
				cartKey: ''
			};
		},
		methods: {
			popupOpen(e) {
				console.log("popupOpen: ", e);
				this.type = e.type;
				this.cartKey = e.cartKey || '';
				this.productInfo = {
					...e.productInfo
				};
				this.spuList = [...e.productInfo.spu];
				this.spuSel = e.spuInfo || this.spuList[0];
				this.proNum = e.count || 1;
				this.$refs.spuPopup.open("bottom");
			},
			popupClose() {
				this.$refs.spuPopup.close();
			},
			popupChange(e) {
				this.$emit('popupChange', e);
			},
			proNumMinus() {
				if (this.proNum > 1) this.proNum--;
			},
			proNumPlus() {
				this.proNum++;
			},
			spuChange(e) {
				this.spuSel = e || {};
			},
			toCart() {
				const e = {
					product_id: this.productInfo._id,
					spu_id: this.spuSel.spu_id,
					product_info: this.productInfo,
					spu_info: this.spuSel,
					count: this.proNum,
				}
				this.$emit('popupCart', e);
				this.popupClose();
			},
			toBooking() {
				const e = {
					productId: this.productInfo._id,
					spuId: this.spuSel.spu_id,
					count: this.proNum,
				}
				this.$emit('popupBooking', e);
				this.popupClose();
			},
			cartBooking() {
				const e = {
					cartKey: this.cartKey,
					productInfo: this.productInfo,
					spuInfo: this.spuSel,
					count: this.proNum,
				}
				this.$emit('popupCartBooking', e);
				this.popupClose();
			},
			cartUpdate() {
				const e = {
					cartId: this.cartId,
					productId: this.productInfo._id,
					productInfo: this.productInfo,
					spuId: this.spuSel.spu_id,
					spuInfo: this.spuSel,
					count: this.proNum,
				}
				this.$emit('popupCartUp', e);
				this.popupClose();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup_content {
		width: 100%;
		background: #fff;

		.box {
			width: 100%;
			background: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: center;

			.close {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: $uni-primary;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 30rpx;
				right: 30rpx;

				>.image {
					width: 100%;
					height: 100%;
				}
			}

			.popTop {
				margin-top: 30rpx;
				width: 100%;
				height: 60rpx;
				text-align: center;

				>.text {
					font-weight: 500;
					font-size: 32rpx;
					color: $uni-base-color;
				}
			}

			.spuList,
			.spuNumView {
				padding: 0 30rpx;
				width: calc(100% - 60rpx);
				display: flex;
				flex-direction: column;

				>.title {
					padding: 0 30rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: $uni-main-color;
				}

				.content {
					padding: 10rpx 30rpx;
					width: calc(100% - 60rpx);
					display: flex;
					flex-direction: column;

					.spuItem {
						margin: 10rpx;
						padding: 8rpx 16rpx;
						border-radius: 30rpx;
						width: fit-content;
						background: $uni-bg-color;
						display: flex;
						flex-direction: row;

						>text {
							font-weight: 400;
							font-size: 28rpx;
							color: $uni-main-color;
						}

						>text:nth-child(2) {
							padding: 0 10rpx;
						}
					}

					.activeItem {
						background: $uni-primary;

						>text {
							color: #fff;
						}
					}
				}
			}

			.spuNumView {
				padding: 10rpx 30rpx;
				width: calc(100% - 60rpx);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.spuNum {
					display: flex;
					flex-direction: row;
					align-items: center;

					>uni-icons {
						padding: 10rpx 20rpx;
					}

					>text {
						width: 80rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: $uni-main-color;
						text-align: center;
						border: 2rpx solid $uni-extra-color;
						border-radius: 4rpx;
					}
				}

			}

			.btns {
				margin-top: 30rpx;
				padding: 30rpx;
				width: calc(100% - 60rpx);
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				.btnDefault {
					width: 50%;
					height: 76rpx;
					background: $xxf-red;
					box-shadow: none;
					border-radius: 38rpx;
					border-top-right-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.btnGray {
					background: #F0F0F0;
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;
					border-top-left-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					color: #333333 !important;
				}
			}
		}
	}
</style>